<template>
  <ul class="notification">
    <li v-for="item in records" :key="item.id" class="notification-item" @click="onItemClick(item)">
      <template v-if="item.topPicPath">
        <div class="new-card">
          <div class="new-content">
            <p class="title new-card2 li-sign" :title="item.subject" :class="{ 'li-sign-red': item.isStick === 'Y' }">
              {{ item.subject }}
            </p>
            <p class="content warp2">{{ item.simpleContent }}</p>
          </div>
          <div class="notification-item-poster">
            <img :src="`${baseImageUrl}/${item.topPicPath}`" width="110px" alt="" />
          </div>
        </div>
      </template>
      <template v-else>
        <div class="new-card2 li-sign" :title="item.subject" :class="{ 'li-sign-red': item.isStick === 'Y' }">
          <span v-if="item.isStick === 'Y'" style="color: #1989fa">【置顶】</span>
          {{ item.subject }}
        </div>
      </template>
    </li>
  </ul>
</template>

<script>
  export default {
    name: 'Notification',
    data() {
      return {
        baseImageUrl: null,
        records: []
      }
    },
    methods: {
      onItemClick(row) {}
    }
  }
</script>

<style lang="scss">
  .notification {
    .scroll-view {
      height: calc(100% - 45px);
      margin: 0 0 0 10px;

      .is-stick {
        position: absolute;
        z-index: 9;
        background-color: #fff;
      }
    }

    .stick-view {
      margin: 0 0 0 10px;
    }

    .notification-item {
      border-bottom: 1px solid #ebeef5;
      cursor: pointer;

      &:hover {
        .new-card2 {
          color: var(--color-primary);
        }
      }
    }

    .li-sign {
      position: relative;

      &:hover {
        color: var(--color-primary);
        text-decoration: underline;
      }

      &::after {
        position: absolute;
        top: 50%;
        left: 0;
        z-index: 1;
        width: 5px;
        height: 5px;
        background-color: #b4b3b3;
        border-radius: 50%;
        transform: translate(0, -50%);
        content: '';
      }
    }

    .li-sign-red {
      &::after {
        background-color: #e12924;
      }
    }

    .new-card {
      display: flex;
      width: 100%;

      .new-content {
        width: calc(100% - 120px);

        .title {
          text-indent: 1em;
        }

        .content {
          margin-left: 1em;
          color: #606266;
        }

        &:hover {
          .title {
            color: var(--color-primary);
          }
        }
      }

      .notification-item-poster {
        width: 120px;
        height: 80px;
        margin: 10px;
        overflow: hidden;
      }
    }

    .new-card2 {
      width: 100%;
      height: 45px;
      overflow: hidden;
      line-height: 45px;
      white-space: nowrap;
      text-indent: 1em;
      text-overflow: ellipsis;
    }

    .warp2 {
      @include ellipsis(2);
      display: flex;
    }
  }
</style>
